<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/royaltyTemplate'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="日期">
                        <el-date-picker
                        v-model="paging.username"
                        style="width:250px"
                        type="date"
                        placeholder="请选择"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select style="width:250px" clearable v-model="paging.username" placeholder="请选择">
                            <el-option label="推拿" value="1"> </el-option>
                            <el-option label="足疗" value="2"> </el-option>
                            <el-option label="SPA" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="员工">
                        <el-input type="text" v-model="paging.username"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="门店">
                        <el-select style="width:250px" clearable v-model="paging.username" placeholder="请选择">
                            <el-option label="推拿" value="1"> </el-option>
                            <el-option label="足疗" value="2"> </el-option>
                            <el-option label="SPA" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="等级">
                        <el-select style="width:250px" clearable v-model="paging.username" placeholder="请选择">
                            <el-option label="推拿" value="1"> </el-option>
                            <el-option label="足疗" value="2"> </el-option>
                            <el-option label="SPA" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                 <div class="operation-box clear-float">
                    <el-button icon="el-icon-plus" @click="isInfo=true" style="margin-left:auto;" type="primary">新增</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column prop="username" label="日期" min-width="150"> </el-table-column>
                    <el-table-column prop="code" label="门店" min-width="150"> </el-table-column>
                    <el-table-column prop="username" label="员工" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="项目" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="等级" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="百分比提成" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="时长提成" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="百分比点钟费" min-width="150"> </el-table-column>
                    <el-table-column prop="create_time" label="时长点钟费" min-width="150"> </el-table-column>
                    <el-table-column prop="price" label="操作" align="right" >
                        <template slot-scope="scope">
                             <span @click="setRow(scope.row,1)" class="tab-table-text">编辑</span>
                            <span @click="setRow(scope.row,1)" class="tab-table-text">查看</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            paging: {
                username: '',//姓名
                start_time: '',//开始时间
                end_time: '',//结束时间
                page: 1,
                total: 0,
                limit: 10,
            },

            form: {
                date: "",
            },
            tableData: []
        };
    },
    created() {
       
    },
    methods: {
        async setRow(type, row) {
            this.utils.goUrl('/technicianSurfaceDetails?type='+type);
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>